<template>
  <view>
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">职务详情</block>
    </my-header>
    <view class="page-content" :style="{ height: this.ContentArea + 'px' }">
      <view class="form-item">
        <view class="form-item-label">机构名称:</view>
        <view class="form-item-content">
          <input
            v-model="formData.title"
            placeholder="机构名称"
            class="form-item-content-input"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">上级部门:</view>
        <view class="form-item-content">
          <input
            v-model="formData.parentPath"
            class="form-item-content-input"
            disabled
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">机构类型:</view>
        <my-select
          dict-code="org_category"
          rangeKey="title"
          v-model="formData.orgCategory"
        />
      </view>
      <view class="form-item">
        <view class="form-item-label">排序:</view>
        <view class="form-item-content">
          <input
            v-model="formData.departOrder"
            class="form-item-content-input"
            type="number"
            placeholder="排序"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">职位类型:</view>
        <my-select
          dict-code="post_type"
          rangeKey="title"
          v-model="formData.postType"
        />
      </view>
      <view class="form-item">
        <view class="form-item-label">计费标准:</view>
        <my-select
          dict-code="freight_basis"
          rangeKey="title"
          v-model="formData.freightBasis"
        />
      </view>
      <view class="form-item">
        <view class="form-item-label">员工人数上限:</view>
        <view class="form-item-content">
          <input
            v-model="formData.demandWorker"
            class="form-item-content-input"
            type="number"
            placeholder="员工人数上限"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">备注:</view>
        <view class="form-item-content">
          <input
            v-model="formData.memo"
            class="form-item-content-input"
            placeholder="备注"
          />
        </view>
      </view>
      <view class="actions">
        <button class="action" @click="cancelClick">取消</button>
        <button type="primary" class="action" @click="submitClick">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
import myHeader from "../../../components/my-header/my-header.vue";
import { createNamespacedHelpers } from "vuex";

const { mapGetters } = createNamespacedHelpers("duties");

export default {
  components: { "my-header": myHeader },
  computed: {
    ...mapGetters(["editData"]),
  },
  data() {
    return {
      formData: {},
    };
  },
  mounted() {
    this.formData = this.editData || {};
  },
  methods: {
    cancelClick() {
      uni.navigateBack({});
    },
    submitClick() {
      this.$http.put("/sys/sysDepart/edit", this.formData).then((res) => {
        if (res.data.success) {
          this.$tip.toast("保存成功");
          this.cancelClick();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-content {
  background: #ffffff;
  box-sizing: border-box;
  padding: 27px 23px;

  .actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;

    .action {
      padding: 2rpx 85rpx;
    }
  }
}

.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c7c7c7;
  padding-bottom: 16px;
  font-size: 12px;
  color: #101317;
  font-weight: bold;
  margin-bottom: 16px;

  &-label {
    flex: 0 0 90px;
  }

  .form-item-content {
    flex: 1;
  }

  .form-item-content-input {
    font-size: 12px;
    color: #101317;
    font-weight: bold;
    width: 100%;
    text-align: right;
  }
}
</style>
